<template>
    <layout title="签到">
        <x-icon slot="icon" @click="onSave" type="checkmark" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

        <button-tab v-model="tabIndex">
            <button-tab-item>报修信息</button-tab-item>
            <button-tab-item>流程记录</button-tab-item>
            <button-tab-item>签到记录</button-tab-item>
        </button-tab>
        <div v-show="tabIndex == 0">
            <group title="报修信息">
                <cell-form-preview :border-intent="false" :list="repairInfo"></cell-form-preview>
                <attachment :files.sync="form.files1" :disabled="true"></attachment>
            </group>

            <group title="人员分配">
                <cell-form-preview :border-intent="false" :list="personInfo"></cell-form-preview>
            </group>
            <group title="签到">

                <x-input title="时间" v-model="signData.signTime" :readonly="true"></x-input>
                <x-input title="地址" v-model="signData.address" :readonly="true"></x-input>
                <x-textarea title="备注" v-model="signData.remark"></x-textarea>

            </group>

        </div>
        <div v-show="tabIndex == 1">
            <timeline>
                <timeline-item v-for="(item, index) in workflow">
                    <h4 class="{ index === 0 : 'recent'} "> {{ item.username }}</h4>
                    <p v-for="content in item.content" class="{ index == 0 : 'recent'} "> {{ content }}</p>
                    <p class="{ index == 0 : 'recent'} "> {{ item.time | time_format }}</p>
                </timeline-item>
            </timeline>
        </div>
        <div v-show="tabIndex == 2">
            <timeline>
                <timeline-item v-for="(item, index) in sign">
                    <h4 class="{ index == 0 : 'recent'} "> {{ item.label }}</h4>
                    <p class="{ index == 0 : 'recent'} "> {{ item.value }}</p>
                </timeline-item>
            </timeline>
        </div>
    </layout>

</template>
<script>
    import {
        ButtonTab, ButtonTabItem, Divider, Group, Cell, CellFormPreview, Rater,
        Timeline, TimelineItem, XTextarea, XInput, Selector
    } from 'vux'
    import Layout from './Layout.vue'
    import { mapGetters } from 'vuex'
    import Attachment from './Attachment'
    import moment from 'moment'
    import { repair as api, user as userApi, file as fileApi } from '../api'


    export default {
        name: 'repair-sign',
        components: {
            ButtonTab,
            ButtonTabItem,
            Divider,
            Layout,
            Group,
            Cell,
            CellFormPreview,
            Attachment,
            Rater,
            Timeline,
            TimelineItem,
            XTextarea,
            XInput,
            Selector,
        },
        data() {
            return {
                tabIndex: 0,
                id: null,
                repairInfo: [],
                personInfo: [],
                workflow: [],
                sign: [],
                form: {
                    endTime: null,
                    device_name: '',
                    type: '',
                    content: null,
                    is_expired: 0,
                    customer_name: null,
                    customer_tel: null,
                    customer_address: null,
                    amount: null,
                    fact_amount: null,
                    do_remark: null,
                    do_person_id: null,
                    do_person_name: null,
                    eval_content: null,
                    eval_score: 0,
                    result: null,
                    reason: null,
                    files1: null,
                    files2: null
                },
                signData: {
                    repair_id: null,
                    signTime: null,
                    address: '',
                    remark: null,
                },
            }
        },
        computed: {
            ...mapGetters(['dicObj', 'dicObjArray']),
            is_expired() {
                return this.form.is_expired === '60000000-0000-0000-0000-000000000003'
            },
        },
        methods: {
            async getSign() {
                this.sign = []
                //读取签到记录

                let ret = await api.getSign({
                    attributes: ['address', 'created_at'],
                    order: [
                        ["created_at", "ASC"]
                    ],
                    where: {
                        repair_id: this.id,
                    }
                })
                if (!ret.data) return

                for (let item of ret.data) {
                    this.sign.push({ label: item.address, value: moment(item.created_at).format('YYYY-MM-DD HH:mm:ss') })
                }
            },
            async getData() {
                //获取数据
                let ret = await api.detail({ id: this.id })
                let data = ret.data
                this.repairInfo.push(
                    { label: '设备名称', value: data.device_name },
                    { label: '故障类型', value: this.dicObj[data.type] },
                    { label: '故障描述', value: data.content },
                    { label: '客户姓名', value: data.customer_name },
                    { label: '联系方式', value: data.customer_tel },
                    { label: '客户地址', value: data.customer_address },
                    { label: '是否过保', value: this.dicObj[data.is_expired] }
                )
                this.personInfo.push(
                    { label: '技术员', value: data.do_person_name },
                    { label: '预计费用', value: data.amount },
                    { label: '备注', value: data.do_remark }
                )
                this.form = data
            },
            async getWorkflow() {
                this.workflow = []

                let ret = await api.getWorkflow({ id: this.id })
                if (!ret.data) return
                this.workflow = ret.data
            },
            async onSave() {
                if (!this.signData.address) {
                    this.$vux.toast.show('未读取到位置信息！')
                    return
                }
                let result = await api.sign(this.signData)
                if (!result.success) {
                    this.$vux.toast.show({
                        type: 'cancel',
                        text: '签到失败'
                    })
                    return
                }
                const that = this
                this.$vux.toast.show({
                    text: '签到成功',
                    onHide() {
                        that.$router.go(-1)
                    }
                })
            },
            async gps() {
                const that = this

                var geolocation = new window.BMap.Geolocation();
                var gc = new window.BMap.Geocoder();

                geolocation.getCurrentPosition(function (r) {
                    // 定位结果对象会传递给r变量  
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 通过Geolocation类的getStatus()可以判断是否成功定位。  
                        // 此时浏览器会弹窗提醒"想使用您当前的位置" -> “不允许” 或者  “好”；
                        // 然而用户选择“不允许” this.getStatus()返回 0；
                        // 用户选择 “好” this.getStatus() 也返回 0；
                        // 此时问题来了，如何知道用户选择的是哪一项呐？

                        // 解决办法：当用户拒绝该网站使用浏览器位置时，此时其精度则为null，通过此值判断用户是否拒绝网站获取浏览器位置信息
                        // if (r.accuracy == null) {
                        //     alert("用户拒绝了地理位置授权");
                        //     return;
                        // }

                        // 用户允许地理位置授权，则走下面代码
                        var pt = r.point;
                        gc.getLocation(pt, function (rs) {
                            //var addComp = rs.addressComponents;
                            //let address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                            that.signData.address = rs.address
                        });
                    }
                    else {
                        //关于状态码    
                        //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。    
                        //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。    
                        //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。    
                        //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。    
                        //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。    
                        //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。    
                        //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)    
                        //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)    
                        //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)    
                        switch (this.getStatus()) {
                            case 2:
                                alert('位置结果未知 获取位置失败.');
                                break;
                            case 3:
                                alert('导航结果未知 获取位置失败..');
                                break;
                            case 4:
                                alert('非法密钥 获取位置失败.');
                                break;
                            case 5:
                                alert('对不起,非法请求位置  获取位置失败.');
                                break;
                            case 6:
                                alert('对不起,当前 没有权限 获取位置失败.');
                                break;
                            case 7:
                                alert('对不起,服务不可用 获取位置失败.');
                                break;
                            case 8:
                                alert('对不起,请求超时 获取位置失败.');
                                break;
                        }
                    }

                },
                    { enableHighAccuracy: true }
                )
            },
        },
        async mounted() {
            this.id = this.$route.query.id
            if (!this.id) {
                return
            }
            this.signData.repair_id = this.id
            await this.getData()
            await this.getSign()
            await this.getWorkflow()
            this.signData.signTime = moment().format('YYYY-MM-DD HH:mm')
            this.gps()
            this.$store.commit('showBack', true)
        },
    }

</script>
<style scoped>
    p {
        color: #888!important;
        font-size: 0.8rem!important;
    }

    h4 {
        color: #666!important;
        font-weight: normal!important;
    }

    .recent {
        color: rgb(4, 190, 2)!important
    }

</style>
